<template>
  <div class="container">
    <div class="title">
      <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png" class="classification" @click="show"/>
      <div class="searchPosition">
        <input type="text" class="search"/>
        <img src="http://file.rzkeji.com/web/loveciy/img/circle/search.png"/>
      </div>
      <img src="http://file.rzkeji.com/web/loveciy/img/circle/blackLove.png" class="love"/>
    </div>
    <drop1 :type="circleType" :animationData="animationData"></drop1>
    <div class="content">
      <ul>
        <li>
          <div class="headImg">
            <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png"/>
          </div>
          <div class="details">
            <div class="detailsTitle">
              <span>饿了就吃的死胖子</span>
              <span>文创  </span>
              <span>2018.05.30</span>
            </div>
            <div class="detailsContent">
              饿了就吃的死胖子: 今天天气好晴朗，处处好风光，好风光月儿啦啦啦啦 
            </div>
            <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png" class="detailsImg"/>
            <div class="detailsFooter">
              <span>阅读:3000</span>
              <span><img src="http://file.rzkeji.com/web/loveciy/img/circle/love.png"/><span>1003</span>  </span>
              <span><img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png"/><span>分享</span></span>
            </div>
          </div>
        </li>
        <li>
          <div class="headImg">
            <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png"/>
          </div>
          <div class="details">
            <div class="detailsTitle">
              <span>饿了就吃的死胖子</span>
              <span>文创  </span>
              <span>2018.05.30</span>
            </div>
            <div class="detailsContent">
              饿了就吃的死胖子: 今天天气好晴朗，处处好风光，好风光月儿啦啦啦啦 
            </div>
            <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png" class="detailsImg"/>
            <div class="detailsFooter">
              <span>阅读:3000</span>
              <span><img src="http://file.rzkeji.com/web/loveciy/img/circle/love.png"/><span>1003</span>  </span>
              <span><img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png"/><span>分享</span></span>
            </div>
          </div>
        </li>
        <li>
          <div class="headImg">
            <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png"/>
          </div>
          <div class="details">
            <div class="detailsTitle">
              <span>饿了就吃的死胖子</span>
              <span>文创  </span>
              <span>2018.05.30</span>
            </div>
            <div class="detailsContent">
              饿了就吃的死胖子: 今天天气好晴朗，处处好风光，好风光月儿啦啦啦啦 
            </div>
            <img src="http://file.rzkeji.com/web/loveciy/img/circle/classification.png" class="detailsImg"/>
            <div class="detailsFooter">
              <span>阅读:3000</span>
              <span><img src="http://file.rzkeji.com/web/loveciy/img/circle/love.png"/><span>1003</span>  </span>
              <span><img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png"/><span>分享</span></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import drop1 from '@/components/drop'
export default {
  data () {
    return {
      animationData:{},
      tag:1,
      circleType:['全部','定制','SHOW','脑洞计划','全部']
    }
  },

  components: {
    drop1
  },

  methods: {
   show(){
    var animation = wx.createAnimation({
      duration: 200,
        timingFunction: 'linear',
    })
    if(this.tag==1)
    {
      animation.height(180).opacity(1).step();
      this.tag=0
    }else{
      animation.height(0).opacity(0).step();
      this.tag=1
    }
     this.animationData=animation.export();
   } 

  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;overflow-x: hidden;}
.title{width: 100%;height: 35px;display: flex;justify-content: row;padding-top: 10px;padding-bottom: 30px;border-bottom: 1px solid #d9d9d9}
.classification{width: 40px;height: 40px;margin-left: 10px;}
.searchPosition{position: relative;}
.searchPosition img{width: 30px;height: 30px;position: absolute;left: 8px;top: 5px;}
.search{width: 224px;height: 40px;border:1px solid gray;margin-left: 6px;border-radius: 10px;padding-left:35px;background: #d9d9d9}
.love{width: 40px;height: 40px;margin-left: 10px;}
.content{width: 100%;margin-top: 15px;}
.content ul{width: 100%;}
.content ul li{width: 100%;display: flex;justify-content: row;margin-top: 20px;}
.headImg{width: 50px;}
.headImg img{width: 50px;height: 50px;border-radius: 50px;}
.details{width: 325px;}
.detailsTitle{width: 100%;height:40px;display: flex;justify-content: row }
.detailsTitle>span:nth-of-type(1){font-size: 16px;font-weight: 600}
.detailsTitle>span:nth-of-type(2){font-size: 14px;display: block;width: 80px;height: 30px;text-align: center;line-height: 30px;border:1px solid gray;border-radius: 20px;margin-left:10px;color: gray}
.detailsTitle>span:nth-of-type(3){font-size: 13px;margin-left: 30px;color: gray}
.detailsContent{width: 100%;line-height: 25px;font-size: 16px;}
.detailsImg{width: 200px;height: 200px;}
.detailsFooter{width: 100%;height: 40px;display: flex;justify-content: row;color: gray}
.detailsFooter>span{display: block;display: flex;justify-content: row;height: 40px;line-height: 40px}
.detailsFooter>span img{width: 25px;height: 25px;vertical-align: middle;margin-top: 7.5px;margin-left:10px;margin-right: 10px}
.detailsFooter>span span{vertical-align: middle;}
.detailsFooter>span:nth-of-type(1){width: 100px;;font-size: 16px;height: 30px;line-height: 30px;}
.detailsFooter>span:nth-of-type(2),.detailsFooter>span:nth-of-type(3){width: 90px;font-size: 14px;border:1px solid #d9d9d9;border-radius: 10px;}
.detailsFooter>span:nth-of-type(2){margin-left: 30px;}
.detailsFooter>span:nth-of-type(3){width: 90px;margin-left: 5px;}
</style>
